import React, { Component } from 'react'
import Socket from '@utils/socket';
import createHash from '@utils/hash';
import QrCode from 'qrcode.react';
import immutable from 'immutable';



const STEP_MAO = {
  BEFORE: 'before',
  READY: 'ready',
  START: 'start',
  END: 'end'
}


export class Home extends Component<any, any> {
  connect:any = null;
  constructor(props) {
    super(props);

    this.state = {
      chatId: '',
      step: STEP_MAO.BEFORE,
      data: immutable.fromJS([])
    };
  }

  componentDidMount() {
    
  }

  gotoReady = () => {
    const hash = createHash();
    this.setState({
      hash,
      clintUrl: `http://localhost:4005/yaoyiyao?hash=${hash}`,
      step: STEP_MAO.READY
    })
  }

  openConnect = () => {
    this.connect = new Socket({
      url: 'ws://127.0.0.1:3006/admin',
      onMessage: this.onMessage,
      onConnectMessage: this.onConnectMessage,
      onUpdate: this.onUpdate
    });
  }

  onMessage = (msg) => {
    console.log('in message')
    console.log(msg)
  }

  onConnectMessage = ({id}) => {
    console.log('in onConnectMessage');
    console.log(id);
    this.setState({
      chatId: id
    })
  }

  onUpdate = (data) => {
    console.log('in socket update');
    console.log(data);
    
  }

  renderStep = () => {
    
  }

  render() {
    const { step, hash, clintUrl  } = this.state;
    return (
      <div>
        {
          step === STEP_MAO.BEFORE && (
            <div className="before-wrapper">
              抽抽
              <button onClick={this.gotoReady}>准备</button>
            </div>
          )
        }

        {
          step === STEP_MAO.READY && (
            <div className="before-wrapper">
              <QrCode value={clintUrl} size={100}/>

              <button onClick={this.openConnect}>开始</button>
            </div>
          )
        }
      </div>
    )
  }
}

export default Home
